<template>
  <div class="p24 messageType">
    <a-layout style="min-height: calc(100vh - 152px);">
      <a-layout-sider :width="225">
        <LeftMenu
          :data="groupList"
          title="消息分类"
          @change="getApprovalList"
          @modification="setting"
          @delTmp="deleteItem"
          @addition="newGroup"
        />
      </a-layout-sider>
      <!-- container -->
      <a-layout style="padding-left:25px">
        <a-row type="flex" class="lay-head" style="margin-bottom:15px">
          <a-col class="mg_l_o">
            <a-button type="primary" icon="plus" @click="addType">
              新建消息类型
            </a-button>
          </a-col>
        </a-row>
        <a-layout-content>
          <a-table rowKey="id" :columns="columns" :pagination="false" :data-source="data" :loading="loading">
            <template slot="operation" slot-scope="text, record">
              <a-button type="link" @click="edit(record)">修改</a-button>
              <a-button type="link" @click="onDel(record.id)">删除</a-button>
            </template>
          </a-table>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <!-- 新增修改分类 -->
    <a-modal
      :maskClosable="false"
      :title="classifyTitle"
      :visible="classifyvisible"
      :confirm-loading="classifyLoading"
      @ok="classifyOk"
      @cancel="classifyCancel"
    >
      <a-form-model
        ref="ruleclassifyForm"
        :model="classifyForm"
        :rules="classifyRules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item label="类型名称" prop="name">
          <a-input v-model="classifyForm.name" placeholder="请输入类型名称" />
        </a-form-model-item>

        <a-form-model-item label="描述">
          <a-input v-model="classifyForm.desc" placeholder="请输入描述" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 新增修改类型 -->
    <a-modal
      :maskClosable="false"
      :title="Title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item label="类型名称" prop="name">
          <a-input v-model="form.name" placeholder="请输入类型名称" />
        </a-form-model-item>
        <a-form-model-item label="通知类型" prop="code">
          <a-input v-model="form.code" placeholder="请输入通知类型" />
        </a-form-model-item>
        <a-form-model-item label="描述">
          <a-input v-model="form.desc" placeholder="请输入描述" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import {
  listAllGroup,
  listAllByGroupDel,
  noticeTypesEdit,
  noticeTypesAdd,
  noticeTypeIdDel,
  addNoticeGroups,
  noticeGroupsEdit,
  noticeGroupsDet
} from "./api";
export default {
  data() {
    return {
      classifyForm: {},
      classifyLoading: false,
      classifyvisible: false,
      classifyTitle: "",
      form: {},
      ids: "",
      classifyRules: {
        name: [{ required: true, message: "请输入类型名称", trigger: "blur" }]
      },
      rules: {
        code: [{ required: true, message: "请输入通知类型", trigger: "blur" }],
        name: [{ required: true, message: "请输入类型名称", trigger: "blur" }]
      },
      visible: false,
      confirmLoading: false,
      Title: "",
      groupList: [],
      data: [],
      groupListId: "",
      loading: false,
      columns: [
        {
          title: "序号",
          width: 100,
          align: "center",
          customRender: (text, record, index) => {
            return index + 1;
          }
        },
        {
          title: "名称",
          dataIndex: "name",
          align: "center"
        },
        {
          title: "通知类型",
          dataIndex: "code",
          align: "center"
        },
        {
          title: "创建日期",
          dataIndex: "gmtCreate",
          align: "center",
          customRender: (text, record, index) => {
            return moment(text).format("YYYY-MM-DD");
          }
        },
        {
          title: "修改日期",
          dataIndex: "gmtModified",
          align: "center",
          customRender: (text, record, index) => {
            return moment(text).format("YYYY-MM-DD");
          }
        },
        {
          title: "操作",
          dataIndex: "operation",
          align: "center",
          scopedSlots: { customRender: "operation" }
        }
      ]
    };
  },
  created() {
    this.getGroupList();
  },
  methods: {
    classifyCancel() {
      this.classifyvisible = false;
      this.$refs.ruleclassifyForm.resetFields();
      this.classifyForm = {};
    },
    classifyOk() {
      const _this = this;
      this.$refs.ruleclassifyForm.validate(valid => {
        if (valid) {
          _this.classifyLoading = true;
          if (_this.classifyForm.id) {
            noticeGroupsEdit(_this.classifyForm)
              .then(res => {
                _this.classifyvisible = false;
                _this.$message.success("修改成功!");
                _this.classifyCancel();
                _this.getGroupList();
              })
              .catch(err => {
                _this.$message.error("修改失败!");
                console.log("debug log --> ", err);
              })
              .finally(() => {
                _this.classifyLoading = false;
              });
          } else {
            _this.classifyForm.moduleType = "hr";
            _this.classifyForm.parentId = 0;
            addNoticeGroups(_this.classifyForm)
              .then(res => {
                _this.$message.success("新增成功!");
                _this.classifyvisible = false;
                _this.classifyCancel();
                _this.getGroupList();
              })
              .catch(err => {
                _this.$message.error("新增失败!");
                console.log("debug log --> ", err);
              })
              .finally(() => {
                _this.classifyLoading = false;
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    onDel(id) {
      noticeTypeIdDel(id)
        .then(res => {
          this.$message.success("删除成功!");
          this.getAllList(this.groupListId);
        })
        .catch(err => {
          this.$message.error("删除失败!");
          console.log("debug log --> ", err);
        });
    },
    edit(data) {
      this.form = JSON.parse(JSON.stringify(data));
      this.Title = "修改消息类型";
      this.visible = true;
    },
    addType() {
      this.Title = "新增消息类型";
      this.visible = true;
    },
    handleOk(e) {
      const _this = this;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          _this.confirmLoading = true;
          if (_this.form.noticeGroupId) {
            noticeTypesEdit(_this.form)
              .then(res => {
                _this.visible = false;
                _this.$message.success("修改成功!");
                _this.getAllList(_this.groupListId);
                _this.handleCancel();
              })
              .catch(err => {
                _this.$message.error("修改失败!");
                console.log("debug log --> ", err);
              })
              .finally(() => {
                _this.confirmLoading = false;
              });
          } else {
            _this.form.noticeGroupId = _this.groupListId;
            noticeTypesAdd(_this.form)
              .then(res => {
                _this.$message.success("新增成功!");
                _this.visible = false;
                _this.handleCancel();
                _this.getAllList(_this.groupListId);
              })
              .catch(err => {
                _this.$message.error("新增失败!");
                console.log("debug log --> ", err);
              })
              .finally(() => {
                _this.confirmLoading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
      this.form = {};
    },
    // 查询通知分类下通知类型
    getAllList(id) {
      listAllByGroupDel(id).then(res => {
        this.data = res.data;
      });
    },
    //  获取分组列表
    getGroupList() {
      listAllGroup().then(res => {
        this.groupList = res.data;
        this.groupListId = this.groupList[0].id;
        if (this.groupListId) {
          this.getAllList(this.groupListId);
        }
      });
    },
    //  新建分组
    newGroup() {
      this.classifyTitle = "新增消息分类";
      this.classifyvisible = true;
    },
    deleteItem(item) {
      this.$confirm({
        title: `是否删除【${item.name}】？`,

        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          noticeGroupsDet(item.id)
            .then(res => {
              this.$message.success("删除成功!");
              this.classifyCancel();
              this.getGroupList();
            })
            .catch(err => {
              this.$message.error("删除失败!");
              console.log("debug log --> ", err);
            });
        },
        onCancel() {}
      });
    },
    // 设置
    setting(item) {
      this.classifyTitle = "修改消息分类";
      this.classifyForm = JSON.parse(JSON.stringify(item));
      this.classifyvisible = true;
    },
    // 获取审批列表查询的
    getApprovalList(item) {
      this.loading = true;
      this.data = [];
      this.groupListId = item.id;
      listAllByGroupDel(item.id)
        .then(res => {
          this.data = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.messageType {
  min-height: calc(100vh - 105px);
}
</style>
